<template>
  <div class="todoapp">
    <!-- 头 -->
    <todo-header :list="list" @add="doAdd"/>
    <!-- 主体 -->
    <!-- 把父的计算属性数组传递给子里的list -->
    <!-- 计算属性里返回的要么是全部数组，要么是未完成数组，要么是已完成数组 -->
    <todo-main :list="selectedList" @del="doDel"/>
    <!-- 底部 -->
    <todo-footer :list="list" @statusChange="onChange" @clear="clear"/>
  </div>
</template>

<script>
// 导入组件
import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";
export default {
  // 注册组件
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      // 本地存储有就用本地存储的，本地存储没有就给默认数组
      list: JSON.parse(localStorage.getItem('todos')) || [
        { id: 100, name: "吃饭", isDone: true },
        { id: 201, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],

      // 用来记录当前子组件里默认谁被点
      status: '全部'
    };
  },

  methods: {
    doDel (id) {
      
      // 把它从list里删掉即可
      // 删除一个元素，就相当于过滤出来其他元素
      this.list = this.list.filter(v => v.id != id)
    },

    // 添加
    doAdd (task) {

      this.list.push({
        // 给时间戳作为id就不能重复了
        id: Date.now(), 
        // 把输入的内容作为name
        name: task,
        // 默认不选中
        isDone: false,
      })
    },

    onChange (status) {

      // 把子组件传递过来的status保存到父的变量里
      this.status = status
    },

    // 清空已完成
    clear () {
      // 数组里所有已完成的给删掉
      // 换句话说就是过滤出所有未完成的数组再重新赋值就相当于把所有已完成删掉了
      this.list = this.list.filter(v => !v.isDone)
    }
  },

  computed: {
    // 当一个结果依赖别的数据产生的时候就可以用计算属性
    selectedList () {
   
      // 要筛选出一个新的数组
      // 如果status是全部就得到一个全部
      // 如果status是未完成就得到一个未完成数组
      // 如果status是已完成就得到一个已完成的数组
      if (this.status == '未完成') {
        // 也就是过滤出没打勾的，也就是isDone为false
        // return this.list.filter(v => {
        //   return v.isDone == false
        // })

        // return this.list.filter(v => v.isDone == false)
        // 找false无非就是对它进行取反，相当于把所有为false的过滤出来
        return this.list.filter(v => !v.isDone)

      }else if (this.status == '已完成') {

        // 过滤出打勾的，也就是isDone为true的
        // return this.list.filter(v => {
        //   return v.isDone == true
        // })

        // return this.list.filter(v => v.isDone == true)
        return this.list.filter(v => v.isDone)

      }else {
        // 返回全部数组
        return this.list
      }
    }
  },

  watch: {
    list: {
      deep: true,
      handler () {
        // 把最新数组存到本地存储即可
        localStorage.setItem('todos', JSON.stringify(this.list))
      }
    }
  }
};
</script>

<style>
</style>